<template>
  <yd-layout>
    <!-- 头部导航 -->
    <yd-navbar slot="navbar" title="购物车" class="header" height="0.9rem" color="#fff">
      <a href="#" slot="left" @click.prevent="$router.go(-1)">
          <yd-navbar-back-icon color="#fff"></yd-navbar-back-icon>
      </a>
      <a href="#" slot="right" style="color:#fff">编辑</a>
    </yd-navbar>
    <!-- /头部导航 -->
    
    <cart-box></cart-box>
    <cart-box></cart-box>

    <!-- 底部导航 -->
    <div slot="tabbar" class="footbar">
      <div class="left">
        <yd-checkbox v-model="isCheckAll" shape="circle" color="#f00" :change="checkAll">全选</yd-checkbox>
        <span class="cost">总计：¥0.00</span>
      </div>
      <div class="right">去结算</div>
    </div>
    <!-- /底部导航 -->
  </yd-layout>
</template>

<script>
import CartBox from '@/components/CartBox'
export default {
  components: {
    CartBox
  }
}
</script>

<style lang="less" scoped>
.footbar {
  display: flex;
  height: 0.9rem;
  box-shadow: 0 -3px 10px #ccc;
  background: #fff;
  .left {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding-left: 0.3rem;
    width: 65%;
    .cost {
      margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #fc6248;
    }
  }
  .right {
    flex-grow: 1;
    background: #fc6248;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 0.9rem;
  }
}
</style>
